<template>
<section>
    <div class="tab" @click='handleScroll' :class="{'pp':pp}">
        <div class="nice" @click='fun1'><router-link to='' :class="{'border':chk1}" >精选问答</router-link></div>
        <div class="new" @click='fun2'><router-link to='' :class="{'border':chk2}" >最新问答</router-link></div>
        <div class="waite" @click='fun3'><router-link to='' :class="{'border':chk3}" >待回答问题</router-link></div>
    </div>
    <div class="nice-content" v-if='chk1'>
        <div>
            <router-link to=''>日本</router-link>
            <router-link to=''>美国</router-link>
            <router-link to=''>泰国</router-link>
        </div>
         <div>
            <router-link to=''>香港</router-link>
            <router-link to=''>台湾</router-link>
            <router-link to=''>新西兰</router-link>
        </div>
         <div>
            <router-link to=''>加拿大</router-link>
            <router-link to=''>英国</router-link>
            <router-link to=''>意大利</router-link>
        </div>

        <ul>
            <li v-for="msg in messages">
                <div class="title">{{msg.title}}</div>
                <div class="content">{{msg.content}}</div>
                <div class="other">
                    <div class="name">{{msg.name}}</div>
                    <div class="count">
                        <i class="el-icon-view"></i>
                        {{msg.num1}}
                        <i class="el-icon-thumb"></i>
                        {{msg.num2}}
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="new-content" v-if='chk2'>
        <ul>
            <li v-for="an in news">
                <div class="title">{{an.title}}</div>
                <div class="content">{{an.content}}</div>
                <div class="other">
                    <div class="name">{{an.info}}</div>
                    <div class="count">
                        <i class="el-icon-view"></i>
                        {{an.num1}}
                        <i class="el-icon-chat-dot-round"></i>
                        {{an.num2}}
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="waits-content" v-if="chk3">
        <ul>
            <li v-for="info in waits">
                <div class="title">{{info.title}}</div>
                <div class="content">{{info.content}}</div>
                <div class="other">
                    <div class="name">{{info.info}}</div>
                    <div class="count">
                        <i class="el-icon-view"></i>
                        {{info.num1}}
                        <i class="el-icon-chat-dot-round"></i>
                        {{info.num2}}
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="button">
        <router-link to='/ask/question'>
            <img src="../../assets/ask/button.png" alt="">
        </router-link>
    </div>



</section>
</template>


<script>
    export default {
        name:'askCenter',
        data(){
            return{
                chk1:true,
                chk2:false,
                chk3:false,
                pp:false,
                messages:[
                    {
                        title:'#加拿大#加拿大签证拒签未收到信，如何查询拒签原因？',
                        content:"1、基本上加拿大拒签的话，都会有拒签信的，如果没有就问旅行社要，而且拒签信上也都明确了你的拒签原因，所以很重要的，不可能没有，好好沟通看一下。2、正常加拿大拒签是常有的事，拒签记录𣎴好查，但如果想知道旅行社有没有递交申请是可以的，让旅行社把交费収据给你，上面有案子号码，可以在签证中心㒳站查询是否递交，但是要一个月之内的。3、一般来讲旅行社也不太可能自损招牌干出这种事儿，还是好好沟通一下，拒签理由不过就是有移民倾向，资金问题，出行目的，旅行记录之类的。如果之后拿到拒签信了，还有不明白的，推荐参考https://www.sohu.com/a/211199573_100037377这个。",
                        name:'鹤发鸡',
                        num1:956,
                        num2:0
                    },
                    {
                        title:'加拿大拒签是不是很快？',
                        content:"1、拒签这个问题谁又能说的清楚呢，有的时间快，有的时间慢，每个人情况呀不一样呀。2、如果是商务签证拒签的话，原因还是呀多方面分析一下的，并是不什么单身大龄剩女的问题，毕竟对于商务签证加拿大审核的都挺严格的，涉及到一些公司行业问题，邀请函，以及双方往来邮件之类的，参加会议对方合作公司联系问题等，具体还是要看你的拒签信给你划分的拒签理由。不然干猜也猜不准。对于拒签信要是有疑问的话，推荐借鉴https://www.sohu.com/a/211199573_1000373773、如果是因为资金问题，首先要明确这部分费用是否由公司承担，有没有派遣函，如果是公司负担的话，家里也不用打4W，短时间内银行账户有大量资金变动也不是一件有利的事情，父母打钱也是要有依据的，解释清楚。4、机票是否能够推掉还是要看你定的是什么机票，某称上我之前听同事说可以退，具体还是要你去好好沟通一下，不过酒店是可以退的，我在booking上预订的酒店，都是可以退掉的。",
                        name:'乱反',
                        num1:2106,
                        num2:0
                    },
                    {
                        title:'下午4点多冰川火车到达Andermatt后，来得及北上卢塞恩吗',
                        content:"1）建议你下载sbb 瑞士火车购票与查询app。上面会实时显示火车的班次。你可以实时查到如何换车去卢塞恩，中间在哪一站换车？在哪一个站台换车？换哪一列车？到卢塞恩几点？非常实用和方便。2)瑞士火车非常准时的。我在2016年在瑞士12天，一直坐火车，只碰到一次晚点了5min.3)卢塞恩是旅游景点，晚上是非常热闹的，人很多。是比较安全的。反倒是苏黎世、日内瓦治安不太好。4）瑞士在夏季光照时间很长，如果你在夏天去的话，晚上要10点后才天黑的。",
                        name:'alcatelliu',
                        num1:76,
                        num2:0
                    }
                ],
                news:[
                    {
                        title:"从京都站要去岚山的话，应该怎么坐车？公交或者电车",
                        content:"从京都站要去岚山的话，应该怎么坐车？公交或者电车",
                        info:"vizitr | 2019-06-01",
                        num1:0,
                        num2:0,
                    },
                    {
                        title:"申根申请表第一行写姓 可是我把全名写上了 这样会被拒签吗 ？",
                        content:"申根申请表第一行写姓 可是我把全名写上了 这样会被拒签吗 ？急急",
                        info:"user_k5vQ0MD9EX | 2019-06-01",
                        num1:0,
                        num2:0,
                    },
                    {
                        title:"英国火车卡购买时候要出示护照吗？买的家庭卡没个人都要照片？",
                        content:"打算安排一个人去火车站买卡，是不是只要带好照片填表格付钱就给卡了？",
                        info:"小种鸡 | 2019-06-01",
                        num1:0,
                        num2:0,
                    },
                ],
                waits:[
                    {
                        title:"求助！Mytrip上订票忘了购买托运行李额怎么办？",
                        content:"我通过天巡搜索在Mytrip上定了多伦多-哈利法克斯的机票，但是忘了购买托运行李额，现在已经出票。用Mytrip预定号码登陆后看到有购买附加服务的选项，按照行李选项点进去看到的东西好像跟托运没什么关系，有谁有操作经验分享下吗？谢谢了！",
                        info:"宋璐 | 21分钟前 ",
                        num1:0,
                        num2:0,
                    },
                    {
                        title:"去年底办旅游签证去看在加拿大留学的孩子但拒签了！不知道现在签",
                        content:"去年底办旅游签证去看在加拿大留学的孩子但拒签了！不知道现在签证情况怎么样？",
                        info:"zldxczdx | 21分钟前",
                        num1:0,
                        num2:0,
                    },
                    {
                        title:"温哥华周边除了维多利亚还有什么好玩的地方？",
                        content:"暑期加西游，跟团去班夫等国家公园一线，还有6天时间，计划温哥华2-3天，维多利亚一天不知道够不够，还有其他周边可玩的吗？",
                        info:"八月未央123 | 40分钟前",
                        num1:0,
                        num2:0,
                    },
                ]
            }
        },

        methods:{
            handleScroll () {
              var scrollTop = this.documentElement.scrollTop || this.body.scrollTop;
              if(scrollTop==0){
                this.pp=true

              }
              console.log(scrollTop)

            },
            fun1(){
                this.chk1 = !this.chk1;
                this.chk2= false;
                this.chk3=false;
            },
            fun2(){
                this.chk2 = !this.chk2;
                this.chk1= false;
                this.chk3=false;
            },
            fun3(){
                this.chk3 = !this.chk3;
                this.chk1= false;
                this.chk2= false;
            }
        },

    }
</script>


<style type="text/css" scoped lang="less">
section{

    .tab{
        margin-top: 1em;
        display: flex;
        justify-content: space-around;
        position: relative;
        a{
            color:#333;
            text-decoration: none;
            display: inline-block;
            padding: 1em 0;
        }
        .border{
            border-bottom: 2px solid #11BF79;
        }
        .pp{
            position: absolute;
            top:0;
            left:0;
            z-index: 100;
        }
    }
    .tab::after{
            content: '';
            display: block;
            position: absolute;
            left:0;
            right:0;
            bottom: 0px;
            height: 2px;
            background:#D8D8D8;
            z-index: -1;
        }

    .nice-content,.new-content,.waits-content{
        div{
            display: flex;
            justify-content: space-around;
            margin:1em 0;
            text-align: center;
            a{
                text-decoration: none;
                color:#333;
                display: block;
                border: 1px solid silver;
                border-radius: 5px;
                width: 100px;
                height: 34px;
                line-height: 34px;
            }
        }
        ul{
            padding: 0;
            border-top:1px solid #f5f5f5;
            list-style-type: none;
            background-color: #f2f2f2;
            li{

                margin:1em 0;
                border:1px solid #f5f5f5;
                width: 100%;
                background-color:#fff;
                .title{
                    font-size: 16px;
                    margin-bottom: .5rem;
                    font-weight: 700;
                    line-height: 1.5em;
                    text-align: left;
                }
                .content{
                    font-size: 14px;
                    color: rgba(0,0,0,.6);
                    margin-bottom: .6rem;
                    line-height: 1.5em;
                    text-align: left;
                    height: 3em;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .other{
                    display: flex;
                    justify-content: space-between;
                    .name{
                       margin-left:1em;
                    }
                    .count{
                        margin-right:1em;
                    }
                }
            }
        }
    }
    .button{
        a{
            img{
                width: 84px;
            }
        }
        position:fixed;
        right:10px;
        bottom:10px;
    }
}
</style>
